<template>
  <div class="app-container" id="follow">
    <el-form ref="form" :model="form" :rules="rules" label-width="179px" class="demo-form-inline">
      <el-card class="box-card a1">
        <p><i class="el-icon-edit" style="width: 20px"></i>老年衰弱（肌少症）筛查阳性随访登记卡<span style="margin-left: 20px">
          <el-button icon="el-icon-download" size="mini" @click="handleExport">导出随访登记卡</el-button></span></p>
<!--        <el-form-item label="所在县（区）">
          <el-input v-model="form.county"></el-input>
        </el-form-item>-->
        <el-form-item label="所在县（区）" prop="county">
          <el-select v-model="form.county" placeholder="所在区县" clearable>
            <el-option
              v-for="dict in selectOptions.dep"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              :disabled="dict.disabled"
            />
          </el-select>
<!--          <el-input v-model="form.county"></el-input>-->
        </el-form-item>

        <el-form-item label="医院（中心、卫生院）">
          <el-input v-model="form.hospital"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="form.numbered"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="通讯住址及邮编">
          <el-input v-model="form.mailing"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>

      </el-card>
      <el-card class="box-card a2">
        <p>一、筛查者基本情况</p>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="身高（CM）">
          <el-input v-model="form.height"></el-input>
        </el-form-item>
        <el-form-item label="体重(KG)">
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
        <el-form-item label="常居住地">
          <el-radio-group v-model="form.usual">
            <el-radio label="城镇"></el-radio>
            <el-radio label="农村"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="家庭年人均收入（元）">
          <el-radio-group v-model="form.income">
            <el-radio label="<24000"></el-radio>
            <el-radio label="24000～"></el-radio>
            <el-radio label="48000～"></el-radio>
            <el-radio label="96000及以上"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文化程度">
          <el-radio-group v-model="form.degree">
            <el-radio label="文盲"></el-radio>
            <el-radio label="小学"></el-radio>
            <el-radio label="初中"></el-radio>
            <el-radio label="高中"></el-radio>
            <el-radio label="大专及以上"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="婚姻及家庭">
          <el-radio-group v-model="form.family">
            <el-radio label="独居"></el-radio>
            <el-radio label="夫妇2人"></el-radio>
            <el-radio label="家庭成员3人及以上"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="照护">
          <el-radio-group v-model="form.passport">
            <el-radio label="无照护"></el-radio>
            <el-radio label="有照护"></el-radio>
            <el-radio label="不需照护"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="居室面积">
          <el-radio-group v-model="form.bedroom">
            <el-radio label="60平方米"></el-radio>
            <el-radio label="90平方米"></el-radio>
            <el-radio label="120平米及以上"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="家族遗传史">
          <el-radio-group v-model="form.genetic">
            <el-radio label="无"></el-radio>
            <el-radio label="有"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="家族遗传史（疾病名）">
          <el-input v-model="form.geneticDisease"></el-input>
        </el-form-item>
        <el-form-item label="与筛查者关系">
          <el-input v-model="form.geneticRelation"></el-input>
        </el-form-item>
        <el-form-item label="吸烟史">
          <el-radio-group v-model="form.smoking">
            <el-radio label="从未吸烟"></el-radio>
            <el-radio label="戒烟5年以上"></el-radio>
            <el-radio label="吸烟"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="饮酒史">
          <el-radio-group v-model="form.drinking">
            <el-radio label="从不饮酒"></el-radio>
            <el-radio label="少量饮酒"></el-radio>
            <el-radio label="每天10ml以上"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="饮食类型">
          <el-radio-group v-model="form.diet">
            <el-radio label="素食"></el-radio>
            <el-radio label="常规"></el-radio>
            <el-radio label="营养补充"></el-radio>
            <el-radio label="常食发酵食品"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="锻炼情况">
          <el-radio-group v-model="form.exercise">
            <el-radio label="从不锻炼"></el-radio>
            <el-radio label="偶尔锻炼"></el-radio>
            <el-radio label="每日锻炼"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="社团活动">
          <el-radio-group v-model="form.club">
            <el-radio label="从不参加"></el-radio>
            <el-radio label="偶尔参加"></el-radio>
            <el-radio label="经常参加"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="防跌倒器械">
          <el-radio-group v-model="form.equipment">
            <el-radio label="使用"></el-radio>
            <el-radio label="不使用"></el-radio>
            <el-radio label="需要但没有"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="急救可穿戴设备">
          <el-radio-group v-model="form.treatment">
            <el-radio label="使用"></el-radio>
            <el-radio label="不使用"></el-radio>
            <el-radio label="需要但没有"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="社区无障碍通道">
          <el-radio-group v-model="form.passage">
            <el-radio label="有"></el-radio>
            <el-radio label="无"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="社区体育设施">
          <el-radio-group v-model="form.facilities">
            <el-radio label="有"></el-radio>
            <el-radio label="无"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="紧急联系人">
          <el-radio-group v-model="form.contact">
            <el-radio label="有"></el-radio>
            <el-radio label="无"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="紧急联系人（姓名）">
          <el-input v-model="form.contactName"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人（电话）">
          <el-input v-model="form.contactTel"></el-input>
        </el-form-item>
        <el-form-item label="签约家庭医生">
          <el-radio-group v-model="form.doctor">
            <el-radio label="有"></el-radio>
            <el-radio label="无"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="签约家庭医生（姓名）">
          <el-input v-model="form.doctorName"></el-input>
        </el-form-item>
        <el-form-item label="签约家庭医生（电话）">
          <el-input v-model="form.doctorTel"></el-input>
        </el-form-item>
      </el-card>
      <el-card class="box-card a3">
        <p>二、老年衰弱筛查</p>
        <el-form-item label="筛查日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.lnjszDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="筛查项目">
<!--          <el-radio-group v-model="form.lnjszItem">
            <el-radio label="实验室老年衰弱（肌少症）筛查"></el-radio>
            <el-radio label="快速综合评估"></el-radio>
          </el-radio-group>-->
          <el-checkbox-group v-model="checkList" size="mini" @change="selectAllBtn($event)">
            <el-checkbox label="实验室老年衰弱（肌少症）"></el-checkbox>
            <el-checkbox label="快速综合评估"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="筛查结果">
          <el-row>
            <el-col :span="24">
              <div class="inner_div">
                1、
                <el-input placeholder="" v-model="form.lnjszFirst" style="margin-right: 3px;"/>
                2、
                <el-input placeholder="" v-model="form.lnjszSecond" style="margin-left: 5px;"/>
                3、
                <el-input placeholder="" v-model="form.lnjszThird" style="margin-left: 5px;"/>
                4、
                <el-input placeholder="" v-model="form.lnjszFour" style="margin-left: 5px;"/>
                5、
                <el-input placeholder="" v-model="form.lnjszFive" style="margin-left: 5px;"/>
                6、
                <el-input placeholder="" v-model="form.lnjszSix" style="margin-left: 5px;"/>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-card>
      <el-card class="box-card a4">
        <p>三、老年综合评估</p>
        <el-form-item label="老年综合评估">
          <el-radio-group v-model="form.lnpgIs">
            <el-radio label="有"></el-radio>
            <el-radio label="无"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评估日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.lnpgDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="评估结果">
          <el-radio-group v-model="form.lnpgResult">
            <el-radio label="正常"></el-radio>
            <el-radio label="异常"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="筛查结果">
          <el-row>
            <el-col :span="24">
              <div class="inner_div">
                1、
                <el-input placeholder="" v-model="form.lnpgFirst" style="margin-right: 3px;"/>
                2、
                <el-input placeholder="" v-model="form.lnpgSecond" style="margin-left: 5px;"/>
                3、
                <el-input placeholder="" v-model="form.lnpgThird" style="margin-left: 5px;"/>
                4、
                <el-input placeholder="" v-model="form.lnpgFour" style="margin-left: 5px;"/>
                5、
                <el-input placeholder="" v-model="form.lnpgFive" style="margin-left: 5px;"/>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-card>
      <el-card class="box-card a5">
        <p>四、临床处理</p>
        <el-form-item label="处理方案">
          <div>
            <el-radio-group v-model="form.clinical">
              1、
              <el-radio label="综合治疗"></el-radio>
              2、
              <el-radio label="专科治疗"></el-radio>
              3、
              <el-radio label="医养结合"></el-radio>
              4、
              <el-radio label="护理院"></el-radio>
              5、
              <el-radio label="居家颐养"></el-radio>
              6、
              <el-radio label="门诊治疗"></el-radio>
              7、
              <el-radio label="失访"></el-radio>
            </el-radio-group>
            <div class="inner_div2">
              其他 <el-input placeholder="" v-model="form.clinicalOther" style="margin-left: 5px;"/>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="填表日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.clinicalCdate"></el-date-picker>
        </el-form-item>
        <el-form-item label="申表日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.clinicalAdate"></el-date-picker>
        </el-form-item>
        <el-form-item label="记录人">
          <el-input placeholder="" v-model="form.clinicalRecorder"/>
        </el-form-item>
        <el-form-item label="申表人">
          <el-input placeholder="" v-model="form.clinicalApplicant"/>
        </el-form-item>
      </el-card>
      <el-form-item style="margin-top: 15px">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getFollow, addFollow, updateFollow, listFollow } from '@/api/his/follow'
import { tansParams } from '@/utils/ruoyi'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { getPatient } from '@/api/his/patient'
import { getDicts } from '@/api/system/dict/data'

export default {
  name: 'PatientReg',
  dicts: [],
  data() {
    return {
      checkList: [],
      btnLoading: false,
      form: {
        lnjszItem:'',
        status:'',
      },
      // 表单校验
      rules: {},
      selectOptions:{
        dep:[],
        isExit:[], //判断是否重复
      },
    }
  },
  created() {
    this.reset();
    this.init();
    this.getDicts();
  },
  methods: {
    selectAllBtn(obj){
      for(var i=0;i<obj.length;i++){
        if(obj[i]!=null && obj[i]!=''){
          this.checkList[i] = obj[i]
          //console.log(obj[i],obj[i])
        }
      }
    },
    getDicts(){
      getDicts("his_ins_dep").then(response => {
        response.data.forEach((self,index) => {
          if(this.selectOptions.isExit.indexOf(self.dictValue)==-1){
            this.selectOptions.isExit.push(self.dictValue);
            this.selectOptions.dep.push({ value: self.dictLabel, label: self.dictValue})
          }
        });
      });
    },
    init(){
      const id = this.form.patientId = this.$route.params && this.$route.params.id;
      listFollow({patientId:id,status:this.form.status}).then(response => {
        if(response.rows!=null && response.rows[0]!=null){
          //console.log('response: '+JSON.stringify(response))
          this.form = response.rows[0];
          var status =  response.rows[0].status
          if(status.indexOf('1')==-1){
            this.form.status = status +'@' + '1' //1: 没有随访过
          }else{
            this.form.status = '1';
          }

          var checkList = response.rows[0].lnjszItem;
          if (checkList != null) {
            var array = checkList.split('@');
            for (var i = 0; i < array.length; i++) {
              if (array[i] != null && array[i] != '') {
                this.checkList.push(array[i])
              }
            }
          }
        }else{
          getPatient(id).then(response => {
            //console.log('response.data: '+JSON.stringify(response.data))
            this.form.username = response.data.patientName
            this.form.age = response.data.age
            this.form.mailing= response.data.address
            this.form.telephone= response.data.tel
            this.form.hospital = response.data.unit
            this.form.numbered = response.data.sliceNo
            this.form.status = '1' //1：已随访
            /* var status =  response.data.status
            if(status.indexOf('1')==-1){
              this.form.status = status +'@' + '1' //1: 没有随访过
            }else{
              this.form.status = '1';
            } */
          })
        }
      });
    },
    onSubmit() {
      //提交表单
      this.$refs["form"].validate(valid => {
        var checkList = ''
        for(var i=0;i<this.checkList.length;i++){
          var item = this.checkList[i]
          if(item!=null && item!=''){
            checkList+= (i==this.checkList.length-1)?this.checkList[i]:this.checkList[i]+'@'
          }
        }
        this.form.lnjszItem = checkList;
        if (this.form.id != null) {
          this.form.upateTime = Date.now();
          updateFollow(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");

          });
        } else {
          this.form.createTime = Date.now();
          addFollow(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
          });
        }
        //关闭tab
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.go(-1);
      })
    },
    delView({ dispatch, state }, view) {
      return new Promise(resolve => {
        dispatch('delVisitedView', view)
        dispatch('delCachedView', view)
        resolve({
          visitedViews: [...state.visitedViews],
          cachedViews: [...state.cachedViews]
        })
      })
    },    // 表单重置
    reset() {
      this.form = {
        id: null,
        patientId: null,
        sliceNo: null,
        county: null,
        hospital: null,
        mailing: null,
        numbered: null,
        telephone: null,
        username: null,
        age: null,
        height: null,
        weight: null,
        usual: null,
        income: null,
        degree: null,
        family: null,
        passport: null,
        bedroom: null,
        genetic: null,
        geneticDisease: null,
        geneticRelation: null,
        smoking: null,
        drinking: null,
        diet: null,
        exercise: null,
        club: null,
        equipment: null,
        treatment: null,
        passage: null,
        facilities: null,
        contact: null,
        contactName: null,
        contactTel: null,
        doctor: null,
        doctorName: null,
        doctorTel: null,
        lnjszDate: null,
        lnjszItem: null,
        lnjszFirst: null,
        lnjszSecond: null,
        lnjszThird: null,
        lnjszFour: null,
        lnjszFive: null,
        lnjszSix: null,
        lnpgIs: null,
        lnpgDate: null,
        lnpgResult: null,
        lnpgFirst: null,
        lnpgSecond: null,
        lnpgThird: null,
        lnpgFour: null,
        lnpgFive: null,
        lnpgSix: null,
        clinical: null,
        clinicalOther: null,
        clinicalRecorder: null,
        clinicalApplicant: null,
        clinicalCdate: null,
        clinicalAdate: null
      };
      this.resetForm("form");
    },
    handleExport(){
      const loading = this.$loading({
        text: '随访登记卡导出中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });

      const baseURL = process.env.VUE_APP_BASE_API;
      const api ='/his/patient/exportFollow';
      var query = {patientId: this.form.patientId};
      var url = baseURL + api + '?' + tansParams(query);
      axios({
        method: 'get',
        url: url,
        responseType: 'blob',
        params: {},
        headers: { Authorization: "Bearer " + getToken() },
      }).then(res =>{
          loading.close();
          const blob = new Blob([res.data], {type: 'application/pdf'})
          let href = URL.createObjectURL(blob)
          window.open(href)
        }
      )
    },

    onCancel(){
      //关闭tab
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },

  }
}
</script>


<style lang="scss" scoped>
#follow .el-form-item {
  margin-bottom: 5px !important;
}

.inner_div {
  display: flex;
  ::v-deep {
    .el-input {
      width: 50%;
      display: inline-block;
    }
  }
}
.inner_div2 {
  display: flex;
  ::v-deep {
    .el-input {
      width: 40%;
      display: inline-block;
    }
  }
}
</style>
